<template>
  <div class="control">
    <transition name="v">
      <div class="iconfont inner" style="font-size: 24px;" v-show="food.num>0" @click="decreaseclick">
        &#xe637;
      </div>
    </transition>
    <transition name="vv">
      <div class="cartNum" v-show="food.num>0" :class="food.num >= 1 ? 'count' : ''">
        {{food.num}}
      </div>
    </transition>
    <div class="cartAdd iconfont" @click="addclick">
    &#xe644;
    </div>
  </div>
</template>

<script>
export default {
  name: 'cartControl',
  props: {
    food: {
      type: Object
    }
  },
  methods: {
    addclick () {
      this.food.num++
      this.$emit('cartadd', event.target)
    },
    decreaseclick () {
      if (this.food.num === 0) {
        this.food.num = 0
      } else {
        this.food.num--
      }
    }
  }
}
</script>

<style scoped>
.cartNum, .cartAdd{
  display: inline-block;
}
.inner{
  padding: 6px;
  font-size: 24px;
  line-height: 24px;
  color: rgb(0, 160, 220);
  display: inline-block;
  transition: all .4s linear;
}
.cartNum{
  font-size: 10px;
  line-height: 24px;
  position: relative;
  bottom: 4px;
  transform: rotate(0);
  transition: all .4s linear;
  animation-name:mymove;
  animation-duration: .4s;
}
.count{
  animation-name:myMove;
  animation-duration: .4s;
}
.cartAdd{
  font-size: 24px;
  line-height: 24px;
  color: rgb(0, 160, 220);
  padding: 6px;
}
.v-enter{
  opacity: 0;
  transform: translate3D(24px, 0, 0);
}
.v-leave-to{
  opacity: 0;
  transform: translate3D(24px, 0, 0);
}
.vv-enter{
  opacity: 0;
  transform: rotate(180deg);
}
.vv-leave-to{
  opacity: 0;
  transform: rotate(180deg);
}
@keyframes myMove{
  from {
    left:24px
  }
  to {
    left:0px;
  }
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes mymove{
  from {
    left: 0px
  }
  to {
    left:24px;
  }
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
</style>
